<template>
  <div>
    <form>
      <label>姓名：</label>
      <input type="text" v-model.lazy.trim="uname" /><br /><br />

      <label>年龄：</label>
      <input type="number" v-model.number="age" /><br /><br />

      <label>身高：</label>
      <input type="number" v-model.number="stature" />(米)<br /><br />

      <label>体重：</label>
      <input type="number" v-model.number="weight" />(公斤)<br /><br />

      <label>病史：</label>
      <input type="text" /><br /><br />

      <button @click.prevent="submit">诊断</button>
    </form>

    <p v-show="isShow">患者 {{uname}} 的诊断结果：{{isHealth}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: '',
      age: '',
      stature: '',
      weight: '',
      isHealth: '',
      isShow: false,
    }
  },
  methods: {
    submit() {
      this.isShow = true
      const BMI = this.weight / (this.stature * this.stature)
      // console.log(BMI)
      if (BMI >= 18.5 && BMI <= 23.9) {
        this.isHealth = '正常'
      } else if (BMI < 18.5) {
        this.isHealth = '体重过轻'
      } else if (BMI > 23.9) {
        this.isHealth = '体重过重'
      }
    },
  },
}
</script>
